<template>

  <div  class="content-container">
    <div class="login-form">
      <el-upload 
      :action="upLoadAction" 
      :data="dataObj" 
      :show-file-list="false"
      drag 
      :on-success="onUploadSuccess"
      :before-upload="beforeAvatarUpload">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将Excel文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
  </div>

    </div>
</template>

<script>
import { customers, addOrUpdate } from "@/api/user/index";
import { itemWithSubLevel, subList } from "@/api/district/index";
import { mapGetters } from "vuex";
var that = null;
export default {
  name: "user",
  data() {
    return {
      upLoadAction: process.env.BASE_API + "/history/importHistory",
      province: "",
      city: "",
      area: "",
      street: "",
      dataObj: { token: "", key: "" },
      form: {
        dtlAddress: "",
        province: "",
        phone: "",
        name: "",
        sex: "男",
        password: "123456",
        description: ""
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            min: 5,
            max: 20,
            message: "长度在 5 到 20 个字符",
            trigger: "blur"
          }
        ]
      },
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        limit: 20,
        name: undefined
      },
      sexOptions: ["男", "女"],
      dialogFormVisible: false,
      dialogStatus: "",
      userManager_btn_edit: true,
      userManager_btn_del: true,
      userManager_btn_add: true,
      textMap: {
        update: "编辑",
        create: "创建"
      },
      tableKey: 0,
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: []
    };
  },
  mounted() {},
  created() {
    that = this;
    this.getList();
    this.userManager_btn_edit = true; //this.elements["userManager:btn_edit"];
    this.userManager_btn_del = true; //this.elements["userManager:btn_del"];
    this.userManager_btn_add = true; //this.elements["userManager:btn_add"];
  },
  computed: {
    ...mapGetters(["elements"])
  },
  methods: {
    beforeAvatarUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "xls";
      const extension2 = testmsg === "xlsx";
      if (!extension && !extension2) {
        this.$alert("只能上传xls/xlsx格式的文件!", "提示", {
          confirmButtonText: "确定",
          callback: action => {}
        });
      }
      return extension || extension2;
    },
    onUploadSuccess(response, file, fileList) {
      if (response.status == 200) {
        this.$confirm(response.message, "提示", {
          confirmButtonText: "继续导入",
          cancelButtonText: "取消",
          type: "info"
        })
          .then(() => {})
          .catch(() => {
            that.$router.go(-1);
          });
      } else {
        this.$alert(response.message, "提示", {
          confirmButtonText: "确定",
          callback: action => {}
        });
      }
    },
    change() {
      console.log(this.province);
    },
    handleFrom(item) {
      return item.from == 0 ? "平台录入" : "用户注册";
    },
    getList() {
      customers(this.listQuery).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },

    handleUpdate(row) {
      getObj(row.id).then(response => {
        this.form = response.data;
        this.dialogFormVisible = true;
        this.dialogStatus = "update";
      });
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delObj(row.id).then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
          const index = this.list.indexOf(row);
          this.list.splice(index, 1);
        });
      });
    },
    create(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          addOrUpdate(this.form).then(() => {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
    },
    cancel(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    update(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false;
          this.form.password = undefined;
          putObj(this.form.id, this.form).then(() => {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
    },
    resetTemp() {
      this.form = {
        phone: undefined,
        name: undefined,
        sex: "男",
        password: undefined,
        description: undefined
      };
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.content-container {
  position: fixed;
  height: 100%;
  width: 100%;
  .login-form {
    position: absolute;
    left: 0;
    right: 0;
    width: 520px;
    padding: 35px 35px 15px 35px;
    margin: 120px auto;
  }
}
</style>
